<!DOCTYPE html>          
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】 设置背景颜色
                    2.product_card 设置样式：内边距，边框设置颜色，加倒角
					 加阴影，所有内容--居中：text-align：center
					3.图片边框倒角，外边距？
					4.“小米su7” 文字：外边距 
					5. “￥279999.0”  文字大小，外边距？
					6.“已有10万+人评价” 颜色  外边距  内边距
			*/
		
			#product_card{
				width:270px;
				height: 420px;
				overflow: hidden;
				border:1px solid grey;
				padding:20px 20px 80px 20px;
				border-radius: 3px;
				box-shadow: 5px 5px 10px 5px grey;
				text-align: center;
			}
			img{
				border-radius: 3px;
				margin:3px 5px 5px 
			}
			h3{
				margin: 1px;
			}
			p{
				color: red;
			}
			#five{
				color: grey;
			}
      /*搜索框*/
			#serach{
				width: 300px;
				height: 50px;
				display: flex;
			}
		    input{
				width: 300px;
				padding: 10px;
				border: 2px solid #ebebeb;
				border-radius: 5px;
				box-sizing: border-box;
			}
			button{
				background: red;
				border: 1px solid red;
				color: white;
			    border-radius: 3px;
				margin:7px 5px 7px -80px;
				width:60px;
				height: 35px;
			}
		
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/su7_海报.jpg" width="260px" height="358px" alt="">
			<h3>小米su7</h3>
			<p>￥279999.00</p>
			<p id="five">已有<span>10万+</span>人评价</p>
		</div>
		
		
		<hr />
		<div id="serach">
            <input type="text" class="inout" placeholder=" 搜索 京东商品"/>
			<button>搜索</button>		
		</div>
		
	</body>
</html>